<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/@shadcn/ui@latest/dist/style.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen p-8">
    <div class="max-w-7xl mx-auto">
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-3xl font-bold text-gray-900">图片管理</h1>
            <div class="space-x-4">
                <a href="{{ url_for('upload') }}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    上传新图片
                </a>
                <a href="{{ url_for('logout') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                    退出登录
                </a>
            </div>
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    {% if category == 'error' %}
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
                        {{ message }}
                    </div>
                    {% else %}
                    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4">
                        {{ message }}
                    </div>
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endwith %}

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for image in images %}
            <div class="bg-white rounded-lg shadow-md p-4">
                {% if image[5] %}
                <h3 class="text-xl font-bold text-blue-600 mb-3">{{ image[5] }}</h3>
                {% endif %}
                
                <img src="{{ image[6] }}" 
                     alt="{{ image[2] }}" 
                     class="w-full h-48 object-cover rounded-lg mb-4">
                <div class="space-y-2">
                    <p class="text-gray-600">原始文件名: {{ image[2] }}</p>
                    <p class="text-gray-600">上传时间: {{ image[3] }}</p>
                    <p class="text-gray-600">状态: {{ '启用' if image[4] else '停用' }}</p>
                    
                    <div class="flex space-x-2">
                        <a href="{{ url_for('toggle_active', image_id=image[0]) }}" 
                           class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-1 px-2 rounded text-sm">
                            {{ '停用' if image[4] else '启用' }}
                        </a>
                        <a href="{{ url_for('delete_image', image_id=image[0]) }}" 
                           class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded text-sm"
                           onclick="return confirm('确定要删除这张图片吗？')">
                            删除
                        </a>
                    </div>

                    {% if image[4] %}
                    <form action="{{ url_for('replace_image') }}" method="post" class="space-y-2">
                        <input type="hidden" name="image_id" value="{{ image[0] }}">
                        <select name="html_file" class="w-full border rounded p-1">
                            {% for html_file in html_files %}
                            <option value="{{ html_file }}">{{ html_file }}</option>
                            {% endfor %}
                        </select>
                        <button type="submit" 
                                class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-2 rounded text-sm w-full">
                            替换到HTML
                        </button>
                    </form>
                    {% endif %}

                    <form action="{{ url_for('update_note', image_id=image[0]) }}" method="post" class="mt-4 space-y-2">
                        <input type="text" 
                               name="note" 
                               value="{{ image[5] or '' }}" 
                               placeholder="添加备注" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <button type="submit" 
                                class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition duration-200">
                            保存备注
                        </button>
                    </form>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</body>
</html> 